<template>
	<view class="productitem" @click="showDetail">
		<view class="pic">
			<image class="img" :src="item.thumb[0].url" mode="aspectFill"></image>
		</view>
		<view class="text">
			<view class="title">{{item.name}}</view>
			<view class="price">
				<view class="big">{{item.price}}</view>
				<view class="small" v-if="item.before_price">{{item.before_price}}</view>
			</view>
			<view class="discount" v-if="item.before_price && (item.price/item.before_price >= 0.1)">{{discount(item.price,item.before_price)}}</view>
			<view class="number" v-if="btnState">
				<view class="skuSelect" v-if="item.sku_select.length" @click.stop="selectSpecs">选规格</view>
				<view class="uNum" v-else>
					<pro-num-box :item="item" ></pro-num-box>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapMutations} from "vuex"
	import{priceFormat,discount} from "@/utils/tools.js"
	export default {
		name:"product-item",
		data() {
			return {
				value:0
			};
		},
		props:{
			item:{
				type:Object,
				default:{}
				
			},
			btnState:{
				type:Boolean,
				default:true
			}
		},
		methods:{
			priceFormat,
			discount,
			showDetail(){
				if(!this.btnState) return
				this.SET_DETAIL_STATE(true);
				this.SET_DETAIL_DATA(this.item)
				console.log("点击了弹出");
			},
			...mapMutations((["SET_DETAIL_STATE","SET_DETAIL_DATA","SET_SPECS_STATE"])),
			selectSpecs(){
				this.SET_SPECS_STATE(true)
				this.SET_DETAIL_DATA(this.item)
				
			}
		}
	}
</script>

<style lang="scss">
	.productitem{
		width: 100%;
		display: flex;
		// justify-content: space-around;
		// align-items: center;
		padding:20rpx 0rpx;
		.pic{
			width: 170rpx;
			height: 170rpx;
			border-radius: 20rpx;
			overflow: hidden;
			.img{
				width: 100%;
				height: 100%;
			}
		}
		.text{
			flex:1;
			padding-left: 20rpx;
			position: relative;
			.title{
				font-size: 34rpx;
				font-weight: bold;
				text-overflow:ellipsis;
				overflow: hidden;				//溢出内容隐藏		//文本溢出部分用省略号表示
				display: -webkit-box;			//特别显示模式
				-webkit-line-clamp: 1;			//行数					
				-webkit-box-orient: vertical;
			}
			.price{
				display: flex;
				justify-content: start;
				align-items: center;
				display: flex;
				font-weight: bold;
				padding: 20rpx 0;
				.big{
					font-size: 34rpx;
					color: #ff5521;
				}
				.small{
					font-size: 26rpx;
					opacity: 0.4;
					text-decoration: line-through;
					padding-left: 10rpx;
					
				}
			}
			.discount{
				font-size: 22rpx;
				color: #ff5521;
				padding: 3rpx 8rpx;
				border: 1rpx solid #ff5521;
				display: inline-block;
				border-radius: 6rpx;
			}
			.number{
				position: absolute;
				right: 0;
				bottom: 0;
				.skuSelect{
					height: 40rpx;
					padding: 0 10rpx;
					background: #ff5521;
					font-size: 28rpx;
					color: #fff;
				}
				.uNum{
					margin-bottom: 20rpx;
				}
				
			}
			
		}
	}
</style>